import React, { Component } from 'react'
import { getpersonalizedMv } from '../../../api/discovery';
import { createFromIconfontCN } from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
import './RecommendedMV.less'
import { iconUrl } from '../../../utlis/icons'

const IconFont = createFromIconfontCN({
  scriptUrl: iconUrl
});

class index extends Component {

  constructor() {
    super()

    this.state = {
      // 推荐mv的数据
      personalized: []
    }
  }

  // 生命周期函数调用接口函数获取数据
  componentDidMount() {
    this.getpersonalizedMvData();
  }

  // 获取推荐MV的数据
  async getpersonalizedMvData() {
    const { data } = await getpersonalizedMv();
    this.setState({
      personalized: data.result
    });
    // console.log(this.state.personalized);
  }
  render() {
    return (
      <div>
        <h3 className="namemv">推荐MV</h3>
        <div className="recmv-items">
          {
            this.state.personalized.map((v, i) => {
              return <div className="recomm-item" key={i}>
                <div className="img-warp" onClick={() => { this.props.history.push(`/mv/${v.id}`) }}>
                  <img src={v.picUrl} alt="" />
                  <span className="sp-icon">
                    <IconFont type="iconbofang6" className="iconfont-sp" />
                  </span>
                  <div className="num-warp">
                    <div className="icon-play">
                      播放次数：
                    </div>
                    <div className="num">{v.playCount}</div>
                  </div>
                </div>
                <div className="info-warp">
                  <div className="name">{v.copywriter}</div>
                  <div className="singer">{v.artistName}</div>
                </div>
              </div>

            })
          }
        </div>
      </div>
    )
  }
}
export default withRouter(index)